<template>
  <div class="service">
    <div class="newcharge">
    <div class="charge-title"> 
      <div class="chargetext">新增缴费</div>
    <el-dropdown  trigger="click" @command="handleCommand">
    <span class="el-dropdown-link">
    {{city}}
    <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
    <el-dropdown-item v-for="(item,index) in citylist" :key="index" v-text="item" :command="item"></el-dropdown-item>
    </el-dropdown-menu>
    </el-dropdown>
    </div>
  
    <div class="charge-box">
       <div class="kindcharge"  v-for="(item,index) in chargelist" :key="index" >
      <div class="kinds" @click="toPage(item.text)" > <i :style="{color:item.color}"  :class=item.class class="i"  ></i>  <br>{{item.text}}
      </div>
    </div>
    </div>
   
    </div>
  </div>

</template>

<script>
export default {
  name: 'Charge',
  data(){
    
    return{
      citylist:["珠海","广州","深圳","佛山","东莞"],
      city:"珠海市",
      selectcharge:"",
      chargelist:[
            {
              text:"电费",
              class:"el-icon-message-solid",
              color:"#EFAF3F",
              path:"Chargeinfo"
            },
            {
              text:"水费",
              class:"el-icon-s-ticket",
              color:"#53B06D",
              path:"Chargeinfo"
              
             
            },
            {
              text:"燃气费",
              class:"el-icon-s-cooperation",
              color:"#DC6C44",
              path:"Chargeinfo"
            },
            {
              text:"固话费",
              class:"el-icon-phone",
               color:"#EFAF3F",
              path:"Chargeinfo"
            },
            {
              text:"宽带费",
              class:"el-icon-s-promotion",
              color:"#4D99CF",
              path:"Chargeinfo"
            },
            {
              text:"电视费",
              class:"el-icon-s-platform",
               color:"#53B06D",
              path:"Chargeinfo"
            },
            {
              text:"邮卡充值",
              class:"el-icon-s-finance",
               color:"#DC6C44",
              path:"Chargeinfo"
            },
            {
              text:"电费",
              class:"el-icon-message-solid",
               color:"#EFAF3F",
              path:"Chargeinfo"
            },
            {
              text:"ETC办理",
              class:"el-icon-s-check",
               color:"#57BD6A",
              path:"Chargeinfo123"
            }
          ]
    }
  },
  methods: {
      handleCommand(command) {
        // this.$message('click on item ' + command);
        this.city=command;
     },
     toPage(text){
       this.selectcharge=text;
       //console.log(this.selectcharge);
       this.$router.push({
      path: '/Chargeinfo',
      query:{
        selectcharge :  this.selectcharge
      }
    })
    }

  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.i{
  font-size:30px;
  margin-top:25px;
  margin-bottom: 10px;
}
 .charge-title{
  height:40px;
  width:375px;
  margin-bottom:15px;
  margin-top:10px;
 }
  .charge-box{
       display: flex;
       align-items: center;
       width:100%;
       flex-wrap: wrap;
       margin-left:32px;
  }
  .kindcharge{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* width:25%; */
      padding-bottom: 2px;
  }
  .kinds{
  height:100px;
  width:100px;
  background-color: #F7F7F7; 
   margin: 0 2px 2px 2px;
   display: block;
   text-align: center;
   font-size:8px;
   /* color:rgb(99, 99, 99); */
   border-radius: 8px;
    box-shadow: 1px 1px 5px #a7c4bc;
}
  
  .newcharge{  
     background-color: #dfeeea;
    height:400px;
    width:100%;
    border-radius:10px;
    margin-top:-10px;
    margin-left:4px;
  }
  .chargetext{
    font-size:14px;
    font-weight: bold;
    position: absolute;
    margin-top:15px;
    margin-left:15px;
   color: #5e8b7e;
  }
  .el-dropdown-link {
    cursor: pointer;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-dropdown{
     font-size:13px;
    position: absolute;
     margin-top:15px;
    margin-left:280px;
  }
</style>
